var fl = document.querySelector('.yjfl');
var str = ''
data.map(item =>{
  str+=`
  <li class="item">
    <a href="#">${item.title}</a>
    <div class="ejcd">
      <ul class="head">`
       item.child.title.map(item=>{
        str+= `
        <li class="head-item">
          <a href="#">${item}</a>
          &gt;
        </li>
        `
      })
      str+=`</ul>
      <ul class="menu-body">
      `
      item.child.children.map(item=>{
        str+= `
        <li class="menu-item">
          <div class="menu-name">
            ${item.title} &gt;
          </div>
          <ul class="ej-list">`
            
          item.children.map(item =>{
            str+=`<li class="ej-item">${item}</li>`
          })
          str+=`</ul>
        </li>`
      })
     str+= `
      </ul>
    </div>
  </li>`
})
fl.innerHTML = str;


var content = document.querySelector('.loop-content');
var items = document.querySelectorAll('.loop-item');
var index = 0;
function move(){
  content.style.transform  = `translateX(${-(index*130+50)}px)`;
  for(var dom of items){
    dom.classList.remove('active')
  }
  items[index+1].classList.add('active');
}
var newfabucontent = document.querySelector('.newfabucontent');
var itemss = document.querySelectorAll('.loop-item');
var indexs = 0;
function move(){
  newfabucontent.style.transform  = `translateX(${-(indexs*130+50)}px)`;
  for(var dom of itemss){
    dom.classList.remove('active')
  }
  itemss[indexs+1].classList.add('active');
}
var newfabucontent=document.querySelector('.newfabucontent')
var nleft=document.querySelector('.newfabuleft .left')
var nright=document.querySelector('.newfabuleft .right')
nright.onclick=function(){
    indexs++;
  move()
   if(newfabucontent.style.transform==`translateX(-440px)`){
    nright.style.display="none";
  }else{ 
    nleft.style.display="block";
   
  }
 
}
nleft.onclick=function(){
  indexs--;
  move();
  if(newfabucontent.style.transform==`translateX(80px)`){
    nleft.style.display="none";
  }else{ 
    nright.style.display="block";
   
  }
}

